<template>
   <div class=''>
      <div class="his-hot">
         <div class="hd">
            <h4>历史记录</h4>
            <van-icon name="delete" @click="clearDelete"></van-icon>
         </div>
         <div class="bd">
            <van-tag plain type="default" v-for="(item,i) in historyKeywordList" 
            :key="i" @click="tagClick(item)">{{ item }}</van-tag>
         </div>
      </div>
      <div class="his-hot">
         <div class="hd">
            <h4>热门搜索</h4>
         </div>
         <div class="bd">
            <van-tag plain :type="item.is_hot==1?'danger':'default'" v-for="(item,i) in hotKeywordList" 
            :key="i" @click="tagClick(item.keyword)">{{ item.keyword }}</van-tag>
         </div>
      </div>
   </div>
</template>

<script>
export default {
   data(){
      return {

      }
   },
   methods:{
      tagClick(val){
         this.$emit("tagClick",val)
      },
      clearDelete(){
         this.$emit("clearDelete")
      }
   },
   props:["historyKeywordList","hotKeywordList"]
}
</script>
<style lang="less" scoped>
   .his-hot{
      background: #fff;
      padding: .1rem;
      margin-bottom: 0.2rem;
      .hd{
         display: flex;
         justify-content:space-between;
         font-size: .20rem;
         h4{
            font-size: .20rem;
         }
      }
      .bd{
         // display: flex;
         // justify-content: space-around;
         padding-top:0.06rem ;
         .van-tag{
            margin-top: 0.04rem;
            margin-right: 0.05rem;
            padding: 0.03rem;
         }
      }
    
   }
</style>